<template>
	<view class="registration">
		<view class="header">
			补充报名信息
		</view>
		<view class="form">
			<view class="row">
				<view class="lab"><view class="warn">*</view>报名科目:</view>
				<input class="input" placeholder="请填写你报名科目，比如英语" type="text" value="" 
					   v-model="formData.kemu"
					   @input="valueClick"/>
			</view>
			<view class="row">
				<view class="lab"><view class="warn">*</view>孩子姓名:</view>
				<input class="input" placeholder="请填写孩子姓名" type="text" value="" v-model="formData.name" @input="valueClick"/>
			</view>
			<view class="row">
				<view class="lab"><view class="warn">*</view>联系电话:</view>
				<input class="input" placeholder="请填写联系电话" type="text" value="" v-model="formData.phone"  @input="valueClick"/>
			</view>
			<view class="row">
				<view class="lab"><view class="warn">*</view>孩子年龄:</view>
				<input class="input" placeholder="请填写孩子年龄，例如 6" type="text" value="" v-model="formData.age" @input="valueClick"/>
			</view>
			<view class="row">
				<view class="lab"><view class="warn">*</view>孩子性别:</view>
				<input class="input" placeholder="请填写孩子性别，比如 男，女" type="text" value="" v-model="formData.six" @input="valueClick"/>
			</view>
			<view class="row">
				<view class="lab">身高(选填):</view>
				<input class="input" placeholder="请输入孩子身高(cm), 比如 165" type="text" value="" v-model="formData.height" />
			</view>
		</view>
		<view class="footer">
			带<view style="display: inline-block; color: red;">“*”</view>标示为必填项目
		</view>
		<button class="unbtn"
			    v-if="!btnShow">补充报名信息</button>
		<button class="btn"
			    v-if="btnShow"
				@click="uploadInformation()">补充报名信息</button>
		<!-- <view class="mask">
			
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData:{
					kemu:"",
					name:"",
					phone:"",
					age:"",
					six:"",
					height:"",
				},
				order_detail:{},
				btnShow:false
			}
		},
		onLoad(option){
			console.log(option)
			this.gainData()
			let store_id = parseInt(option.store_id,10);
			if(!store_id>0){
				store_id = uni.getStorageSync('store_id')
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			this.store_id = store_id
			this.$store.commit('updateStoreId',store_id)
			this.order_id = option.order_id
			// this.actMsg =uni.getStorageSync('inviteAct')
			
		},
		async onShow(){
			await this.gainData()
			// this.orderTime = this.$store.state.orderTime
			// console.log(this.orderTime)
		},
		methods: {
			valueClick()
			{
				if(this.formData.kemu && this.formData.name && this.formData.phone && this.formData.age && this.formData.six )
				{
					this.btnShow=true;
				}
				else
				{
					this.btnShow=false;
				}
			},
			uploadInformation()
			{
				let course=[]
				course.push({
					"activity_id":this.order_detail.activity_id,
					"activity_course_id":this.order_detail.activity_courses[0].activity_course_id,
					"order_activity_course_id":this.order_detail.activity_courses[0].order_activity_course_id,
					"forms":[
					            {
									chooseAddreId:0,
					                "form_field":[
					                    {
					                        "custom_field_id":261,
					                        "name":{
					                            "field_id":261,
					                            "name":"报名科目",
					                            "required":1,
					                            "status":1
					                        },
					                        "value":this.formData.kemu
					                    },
					                    {
					                        "custom_field_id":262,
					                        "name":{
					                            "field_id":262,
					                            "name":"孩子姓名",
					                            "required":1,
					                            "status":1
					                        },
					                        "value":this.formData.name
					                    },
					                    {
					                        "custom_field_id":263,
					                        "name":{
					                            "field_id":263,
					                            "name":"联系电话",
					                            "required":1,
					                            "status":1
					                        },
					                        "value":this.formData.phone
					                    },
					                    {
					                        "custom_field_id":264,
					                        "name":{
					                            "field_id":264,
					                            "name":"孩子年龄",
					                            "required":1,
					                            "status":1
					                        },
					                        "value":this.formData.age
					                    },
					                    {
					                        "custom_field_id":265,
					                        "name":{
					                            "field_id":265,
					                            "name":"孩子性别",
					                            "required":1,
					                            "status":1
					                        },
					                        "value":this.formData.six
					                    },
					                    {
					                        "custom_field_id":266,
					                        "name":{
					                            "field_id":266,
					                            "name":"身高（选填）",
					                            "required":0,
					                            "status":1
					                        },
					                        "value":this.formData.height
					                    }
					                ]
								}
					]
				})
				let data={
					token:this.$store.getters.getToken,
					order_id:this.order_detail.order_id,
					activity_id:this.order_detail.activity_id,
					customer_telephone:this.formData.phone,
					course:JSON.stringify(course)
				}
				// 请求接口
				this.$api.course_user_msg(data).then(res => {
					console.log(res)
					if(res.status){
						this.$api.gain_shop_msg({customer_store_id:this.store_id}).then(res=>{
							if(!res.data.is_recommend){
								this.saveState = true
								setTimeout(()=> {
									this.saveState = false
									uni.navigateTo({
										url:"/pages/memberCenter/memberCenter?store_id=" + this.store_id
									})
								},1000)
							}else{
								this.saveState = true
								setTimeout(()=> {
									this.saveState = false
									uni.navigateTo({
										url:"/pages/memberCenter/collectioncode/collectioncode/receive?store_id=" + this.store_id+"&activity_id="+this.order_detail.activity_id
									})
								},1000)
							}
							
						})
						
					}
				}).catch(err => {
					console.log(err)
				})
				
			},
			async gainData(){
				let data = {
					token:this.$store.getters.getToken,
					store_id:this.store_id,
					order_id:this.order_id
				}
				let that = this
				await this.$api.gain_order_act_detail(data).then(res => {
					console.log(res)
					if(res.status){
						that.order_detail = res.data
						console.log(that.order_detail,'2222222222222222')
					}
				}).catch(err => {
					console.log(err)
				})
			},
		}
	}
</script>

<style>
	.registration{
		position: fixed;
		height: 980upx;
		width: 600upx;
		background: #F3F3F4;
		margin-left: -300upx;
		margin-top: -500upx;
		border-radius: 20upx;
	}
	.registration .header{
		font-family: PingFangSC-Medium;
		font-size: 32upx;
		color: #333333;
		letter-spacing: -0.39upx;
		margin-top: 32upx;
		margin-left: 30upx;
		font-weight: bold;
	}
	.registration .form{
		margin-top: 33upx;
		background-color: #ffffff;
		height: 650upx;
	}
	.row{
		height: 100upx;
		margin-left: 30upx;
	}
	.warn{
		display: inline-block;
		margin-right: 10upx;
		color: #FF391F;
	}
	.lab{
		position: absolute;
		display: inline-block;
		font-size: 28upx;
		color: #000000;
		letter-spacing: -0.3upx;
		margin-top: 30upx;
		background: #ECECEC;
		text-align: center;
		width: 160upx;
		height: 60upx;
		line-height: 60upx;
		margin-left: -20upx;
		border-radius: 5upx;
	}
	.row .input{
		width: 380upx;
		position: absolute;
		margin-top: 30upx;
		margin-left: 145upx;
		font-size: 25upx;
		height: 60upx;
		background: #F5F5F5;
		border-radius: 5upx;
	}
	.registration .footer{
		font-size: 24upx;
		color: #999999;
		letter-spacing: -0.26upx;
		margin-left: 30upx;
		margin-top: 17upx;
	}
	.registration .btn{
		width: 462upx;
		margin-top: 55upx;
		color: #ffffff;
		font-size: 28upx;
		text-align: center;
		border-radius: 44upx;
		border: none;
		outline: none;
		box-shadow: 0 4px 12px 0 rgba(250,176,48,0.55);
		background-image: linear-gradient(90deg, #FE9543 14%, #FF664F 100%);
	}
	.unbtn{
		width: 462upx;
		margin-top: 55upx;
		color: #ffffff;
		font-size: 28upx;
		text-align: center;
		border-radius: 44upx;
		border: none;
		outline: none;
		/* box-shadow: 0 0px 30px #eeeeee; */
		background-color: #F6CDAB;
		/* background-image: linear-gradient(90deg, #FE9543 14%, #FF664F 100%); */
	}
	.registration .mask{
		position: fixed;
		top: 832upx;
		left: 40upx;
		width: 675upx;
		height: 100upx;
		background: rgba(243, 243, 244, 0.6);
	}
</style>
